<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      :height="height"
      style="width: 100%"
      :border="border"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
interface TableColumn {
  prop: string
  label: string
  width?: number | string
  align?: 'left' | 'center' | 'right'
}

interface Props {
  columns: any[]
  tableData: any[]
  height?: string | number
  border?: boolean
  stripe?: boolean
}

// Define props with default values
const props = withDefaults(defineProps<Props>(), {
  columns: () => [],
  tableData: () => [],
  height: 'auto',
  border: true,
  stripe: true
})
</script>

<style scoped>
.table-container {
  width: 100%;
}

:deep(.el-table__inner-wrapper) {
  background-color: #0D1117 !important;
  color: white;
}

:deep(.el-table td), 
:deep(.el-table th) {
  border-color: #727272 !important;
  background-color: #0D1117 !important;
}

:deep(.el-table--border) {
  border-color: #727272 !important;
}

:deep(.el-table thead) {
  color: white;
}
</style>